import React from 'react'
import {connect} from 'dva'
import moment from 'moment'
import {Link, browserHistory} from 'dva/router'
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import RightContacts from "../../../utils/RightConstants";
import RightBox from "../../../components/commons/RightBox";
const InputGroup = Input.Group;
const FormItem = Form.Item;
const Option = Select.Option;
const Dragger = Upload.Dragger;
const TabPane = Tabs.TabPane;
const RadioGroup = Radio.Group;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const dateFormat = 'YYYY-MM-DD';
const doPay = "doPay";
const view = "view";

const Pay = ({routes, params, children, location, dispatch, pay}) => {

    const {page, search, list, editModel} = pay;
    let onEdit = (record, type) => {
        let step = "";
        let title = "";
        if (type == doPay) {
            step = 1;
            title = '结算单付款';
        }else if (type == view) {
            step = 2;
            title = '查看结算单审核记录';
        }


        dispatch({
            type: 'pay/getStatementById',
            payload: {
                step: step,
                id: record.id,
                title : title,
                type : type,
            }
        })
    }
    const columns = [ {
        title: '客户代码',
        dataIndex: 'cstid',
        key: 'cstid',
        width: '120px'
    }, {
        title: '客户名称',
        dataIndex: 'companyname',
        key: 'companyname',
        width: '200px'
    }, {
        title: '结算单号',
        dataIndex: 'stateno',
        key: 'stateno',
        width: '200px'
    }, {
        title: '实际支付(CNY)',
        dataIndex: 'transferamount',
        key: 'transferamount',
        width: '150px'
    },{
        title: '收款人',
        dataIndex: 'accname',
        key: 'accname',
        width: 'accname'
    },{
        title: '银行账号',
        accno: 'accno',
        key: 'accno',
        width: '100px'
    },{
        title: '申请人',
        dataIndex: 'creator',
        key: 'creator',
        width: '100px'
    },{
        title: '申请时间',
        dataIndex: 'createtime',
        key: 'createtime',
        width: '100px'
    }, {
        title: '操作',
        width: '150px',
        render(record) {
            return (
                <span>
                     {record.status == 4 ?
                         <span> <RightBox resource={RightContacts.CAPITAL.CAPITAL_PAY_DOPAY}><a href="#" onClick={() => {onEdit(record, doPay);}}>付款</a></RightBox>
                            <span className="ant-divider"/></span>
                         : ""}

                    <a href="#" onClick={() => {onEdit(record, view);}}>查看付款记录</a>
                </span>
            );

        }
    }];

    const formItemLayout = {
        labelCol: {span: 6},
        wrapperCol: {span: 18}
    };

    const SearchForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;

        const handleSearch = function () {
            validateFields((errors, values) => {
                if (errors) {
                    return
                }

                dispatch({
                    type: 'pay/setSearch', payload: {

                        search: {
                            time: values.time,
                            cstId: values.cstId,
                            stateno: values.stateno,
                            status: values.status,
                            beginTime: '',
                            endTime: '',
                            minamount: values.minamount,
                            maxamount: values.maxamount,
                            creator: values.creator,
                        }
                    }
                });
                let newPage = page;
                newPage.page = 1;
                dispatch({
                    type: 'pay/setPage', payload: {
                        page: newPage
                    }
                });
                dispatch({type: 'pay/getStatementsList'});
            });
        }

        return (
            <div>

                <div>
                    <Row>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'客户代码'}>
                                {getFieldDecorator('cstId', {initialValue: search.cstId})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>

                        <Col span={7}>
                            <FormItem  {...formItemLayout} label={'转账金额'}>
                                {getFieldDecorator('minamount', {initialValue: search.minamount})(
                                    <Input style={{width: 230}} placeholder="最小金额" />
                                )}
                            </FormItem>
                        </Col>

                        <Col span={2}>
                            <FormItem {...formItemLayout} label={'至'} >
                                {getFieldDecorator('maxamount', {initialValue: search.maxamount})(
                                    <Input style={{width: 230}}  placeholder="最大金额" />
                                )}
                            </FormItem>
                        </Col>

                    </Row>
                    <Row>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'结算单号'}>
                                {getFieldDecorator('stateno', {initialValue: search.stateno})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'申请时间'}>
                                {getFieldDecorator('time', {initialValue:
                                    [ search.beginTime == '' ? '' : moment(search.beginTime, dateFormat), search.endTime == '' ? '' :moment(search.endTime, dateFormat)]})(
                                    <RangePicker
                                        style={{width: 230}}
                                        showTime={{ format: 'YYYY-MM-DD' }}
                                        format="YYYY-MM-DD"
                                        placeholder={['开始时间', '结束时间']}
                                    />
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>

                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'申请人'}>
                                {getFieldDecorator('creator', {initialValue: search.creator})(
                                    <Input style={{width: 230}}/>
                                )}
                            </FormItem>
                        </Col>
                        <Col span={8} style={{paddingLeft: 10}}>
                            <Button type="primary" icon="search" style={{marginLeft: 25}} onClick={handleSearch} >查询</Button>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={7}>
                            <FormItem {...formItemLayout} label={'状态'}>
                                {getFieldDecorator('status', {
                                    initialValue: search.status == '' ? '2' : search.status
                                })(
                                    <RadioGroup style={{width: 800}} >
                                        <Radio value='2'>待审核</Radio>
                                        <Radio value='3'>审核失败</Radio>
                                        <Radio value='4'>待付款</Radio>
                                        <Radio value='5'>已付款</Radio>
                                        <Radio value='6'>付款失败</Radio>
                                    </RadioGroup>
                                )}
                            </FormItem>
                        </Col>
                    </Row>
                </div>
            </div>
        );
    });


    return (
        <div>
            <EditPay visible={editModel.showStatus} model={editModel} title={editModel.title}
                     confirmLoading={editModel.confirmLoading} dispatch={dispatch}/>

            <SearchForm/>

            <Table dataSource={list} columns={columns} bordered={false} size={'middle'} scroll={{y: 500}} pagination={{
                showTotal: total => `共 ${total} 条数据`,
                pageSize: page.size,
                total: page.totalRow,
                showSizeChanger: true,
                onShowSizeChange: (current, size) => {
                    let newPage = page;
                    newPage.size = size;
                    newPage.page = 1;
                    dispatch({
                        type: 'pay/setPage', payload: {
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = page;
                    newPage.page = pageNumber;
                    dispatch({
                        type: 'pay/setPage', payload: {
                            page: newPage
                        }
                    });
                    dispatch({type: 'pay/getStatementsList'});
                }
            }}/>
        </div>

    );
}




const EditPay = ({visible, title, dispatch, confirmLoading, model}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        },
    };

    let xform = model.form;

    const InfoForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;
        return (
            <Modal visible={visible} title={title} width={model.width} wrapClassName="vertical-center-modal" onCancel={
                () => {
                    dispatch({
                        type: 'pay/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            } onOk={
                () => {

                    if(xform.type == doPay){
                        validateFields((errors, values) => {
                            if (errors) {
                                return
                            }

                            dispatch({
                                type: 'pay/doPay',
                                payload: {
                                    id: xform.id,
                                    stateid:  xform.id,
                                    status: values.status,
                                    memo: values.memo,
                                    filename: values.filename,
                                    url: values.url,
                                }
                            });

                        });
                    }else{
                        dispatch({
                            type: 'pay/setEditModel',
                            payload: {
                                showStatus: false
                            }
                        });
                    }

                }
            }>


                <Row>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="结算日期"
                            hasFeedback
                        >

                            <span>{xform.createtime}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="结算单号"
                            hasFeedback
                        >

                            <span>{xform.stateno}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="实际支付"
                            hasFeedback
                        >

                            <span>{xform.transferamount}</span>

                        </FormItem>
                    </Col>
                    <Col span={12}>
                        <FormItem
                            {...formItemLayout}
                            label="本次结余"
                            hasFeedback
                        >

                            <span>{xform.unpayamount}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                            label="收款人"
                            hasFeedback
                        >

                            <span>{xform.payman}</span>

                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                            label="银行名称"
                            hasFeedback
                        >

                            <span>{xform.accopenbank}</span>

                        </FormItem>
                    </Col>
                    <Col span={8}>
                        <FormItem
                            {...formItemLayout}
                            label="银行账号"
                            hasFeedback
                        >

                            <span>{xform.accno}</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormItem
                            {...formItemLayout}
                            label="代理费收费标准"
                            hasFeedback
                        >

                            <span>未知</span>

                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <FormItem
                            {...formItemLayout}
                            label="转账确认函"
                            hasFeedback
                        >

                            <a href="url">预览</a>

                        </FormItem>
                    </Col>
                </Row>
                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="审核状态"
                        hasFeedback
                    >
                        <div>
                            {xform.status == 2 ? "待审核" :""}
                            {xform.status == 3 ? "审核失败" :""}
                            {(xform.status == 4 || xform.status == 5 || xform.status == 6) ? "审核成功" :""}

                        </div>
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="审核备注"
                        hasFeedback
                    >
                        <span>{xform.memo}</span>
                    </FormItem>


                    {xform.type == doPay ?
                        <FormItem
                            {...formItemLayout}
                            label="请选择付款结果"
                            hasFeedback
                        >
                            {getFieldDecorator('status', {
                                initialValue: '1'
                            })(
                                <Select>
                                    <Option value="1">付款成功</Option>
                                    <Option value="0">付款失败</Option>
                                </Select>
                            )}
                        </FormItem>
                        :""
                    }

                    {xform.type == doPay ?
                        <FormItem
                            {...formItemLayout}
                            label="付款水单"
                            hasFeedback
                        >
                            {getFieldDecorator('filename', {})(
                                <Dragger {...props}>
                                    <p className="ant-upload-drag-icon">
                                        <Icon type="inbox" />
                                    </p>
                                    <p className="ant-upload-text">点击或拖拽要上传的文件到此处</p>
                                </Dragger>
                            )}
                        </FormItem>
                        :""
                    }

                    {xform.type == doPay ?
                        <FormItem
                            {...formItemLayout}
                            label="付款说明"
                            hasFeedback
                        >
                            {getFieldDecorator('memo', {
                                rules: [{
                                    required: false, message: '请输入付款说明！',
                                }],
                                initialValue: ''
                            })(
                                <Input />
                            )}
                        </FormItem>
                        :""
                    }

                    {xform.type == view ?
                        <FormItem
                            {...formItemLayout}
                            label="付款状态"
                            hasFeedback
                        >
                            <div>
                                {xform.status == 2 || xform.status == 3 || xform.status == 4? "待付款" :""}
                                {xform.status == 5 ? "付款成功" :""}
                                {xform.status == 6 ? "付款失败" :""}

                            </div>
                        </FormItem>
                        : ""
                    }


                    {xform.type == view ?
                        <FormItem
                            {...formItemLayout}
                            label="付款水单"
                            hasFeedback
                        >

                            <a href={xform.payUrl}>预览</a>

                        </FormItem>
                        : ""
                    }

                    {xform.type == view ?
                        <FormItem
                            {...formItemLayout}
                            label="付款备注"
                            hasFeedback
                        >
                            <span>{xform.payMemo}</span>
                        </FormItem>
                        : ""
                    }



                </Form>
            </Modal>
        );
    });


    const props = {
        name: 'file',
        multiple: true,
        showUploadList: false,
        action: '//jsonplaceholder.typicode.com/posts/',
        onChange(info) {
            const status = info.file.status;
            if (status !== 'uploading') {
                //console.log(info.file, info.fileList);
            }
            if (status === 'done') {
                message.success(`${info.file.name} file uploaded successfully.`);
            } else if (status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };



    return (
        <div>
            <div><InfoForm/></div>
        </div>

    );
}


export default connect(({pay}) => ({pay}))(Pay)